<template>
  <div>

    <div class="back show-time" >

      <div class="user-banner show-time" >

        <el-divider content-position="left" class="el-divider2" >
          <div class="user-info" style="border-radius: 10px;" >
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:8089/api/uploadImg'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              <el-tag
                  size="mini"
                  style="margin: 3px;cursor: pointer"
                  v-for="tag in tags"
                  v-if="tag['name']!=null&&tag['name']!==''"
                  :key="tag.name"
                  :type="tag.type">
                <span style="font-size: 12px;font-family: 仿宋"> {{tag.title}} </span> {{tag.name}}
              </el-tag>
          </div>

        </el-divider>
        <div style="position: relative; left: 50px; width:330px;height: 70px;border-radius: 3px; background-color: #e3ede3;  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);" >
         <span style="font-size: 13px;float: left;vertical-align: inherit;font-family: inherit;color: black;" > <span style="font-size: 16px;font-family: 仿宋">个性签名:</span> {{this.userInfo.signature}}  </span>
        </div>
        <div style="position: absolute;top: 1px;right: 1px;">
          <div>
            <TaijiCartition  style="float: right;" ></TaijiCartition>
          </div>
        </div>

        <div style="position: absolute;bottom: 1px;right: 1px;">
          <div>
             <div  class="el-icon-edit" style="width: 20px;height: 20px;margin: 10px; cursor: pointer;" @click="openEdit" ></div>
          </div>
        </div>

      </div>

      <div class="user-body">
        <div class="user-left">
          <div class="back-0" >
            <el-tabs v-model="activeName" @tab-click="handleClick" >
              <el-tab-pane  label="笔记" aria-selected="true" style="font-size: 16px" name="first">
                <div v-for="item in noteList" class="u-fri-List" >
                  <div>
                  </div>
                 {{item['title']}}
                  <div>
                  </div>
                </div>

              </el-tab-pane>
              <el-tab-pane label="好友" style="font-size: 16px"  name="second">
                <div v-for="item in friendList" class="u-fri-List"  @click="getFriendDetailInfo(item)" >
                  <div style="float: left;margin: 10px;"  >
                    <el-image  :src="item['avatar']" style="width: 50px;height: 50px;" ></el-image>
                   <span style="font-size:  14px"> 好友名称:   {{item['friendName']}} </span>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="历史记录" style="font-size: 16px"  name="three">
                <div v-for="item in historyList" class="u-fri-List"  @click="getFriendDetailInfo" >
                  <div style="float: left;margin: 10px;"  >
                  </div>
                </div>
              </el-tab-pane>

            </el-tabs></div>
        </div>
      </div>

      <el-dialog
          title="个人信息编辑"
          :visible.sync="dialogVisible"
          width="30%"
      >

        <div >昵称: <el-input v-model="userEditInfo.userName" placeholder="请输入内容" size="small" style="width: 140px;margin: 5px;"></el-input> </div>
        <div >年龄: <el-input v-model="userEditInfo.age" placeholder="请输入内容" size="small" style="width: 140px;margin: 5px;"></el-input> </div>
        <div >邮箱: <el-input v-model="userEditInfo.email" placeholder="请输入内容" size="small" style="width: 140px;margin: 5px;"></el-input> </div>
        <div>个性签名:<el-input v-model="userEditInfo.signature" type="textarea"
                                :rows="3"
                                placeholder="请输入内容" size="small" style="width: 180px;margin: 5px;"></el-input> </div>

        <div >
          <el-radio v-model="gender" label="1">男生</el-radio>
          <el-radio v-model="gender" label="0">女生</el-radio>
        </div>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editorAndSave" >确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <el-dialog   title="^-^ 好友详情"
                 :visible.sync="showFriendDetailFlag" width="30%">
      <div>
        <el-image/>
      </div>
      好友昵称: {{friendDetail.nickName}}
      邮箱: {{friendDetail.email}}
    </el-dialog>
  </div>
</template>

<script>
import {IpConfig} from '@/utils/IpConifg'
import {get, post} from "@/utils/http";
import TaijiCartition from "@/components/taijiCartition.vue";

export default {
  name: "User",
  components: {TaijiCartition},
  data(){
     return {
       gender:0,
       tags: [
         { name: '标签三', type: 'info' ,title:'年龄: '},
         { name: '标签一', type: 'warning' ,title:'昵称: '},
         { name: '标签二', type: 'success' ,title:'邮箱: '},


       ],
       userId: "",
       baseUrl: '',
       historyList:[1,2,3],
       noteList: [{
         title:'笔记',
         content:'',   //
         time:'',     //
         relativeBook:'', // 关联书籍
         bookTitleImage:'' // 书籍图片
       },{},{},{}],
       friendDetail:{},
       showFriendDetailFlag:false,
       friendList: [1,2,3,4],
       userInfo: {},
       activeTabName:"",
       isCurrentUser:false,
       dialogImageUrl: '',
       dialogVisible: false,
       disabled: true,
       loading: "",
       imageUrl: '',
       userEditInfo:{
         userName: '',
         age:'',
         email:'',
         signature:''
       },
       activeName:'',
       sizeList: ["large", "medium", "small"]
     }
  },
  mounted() {
    console.log("IPConfig: "+IpConfig)
    this.updateUserInfo()
    this.getUserAvatar()
    this.getUserInfo()
    this.getFriend()
    },
  methods:{
    /**
     *
     * @param res
     * @param file
     */
    handleAvatarSuccess(res, file) {
      console.log("resImg: "+JSON.stringify(res))
      this.imageUrl =  res['data']

       // 保存头像路径
       this.saveImgPath()
    },

    /**
     * 获取用户头像
     */
    getUserAvatar(){
      //
      get('/getUserAvatar',{
      }).then(e=>{
        console.log("userAvatar:"+JSON.stringify(e))
        if(e['data']!=null){
          this.imageUrl = e['data']
        }
      })
    },
    /**
     * 获取用户好友列表
     */
    getFriend(){
      post('/friend/getAllFriend',{}).then(e=>{
        console.log( e['data'] )
        if(typeof e['data'] === "string"){
          this.$message({
            message: e['data'],
            type:'info'
          })
        }else{
          this.friendList = e['data']
        }

      })
    },

    /**
     * 获取用户好友的详细信息
     */

    getFriendDetailInfo(item){
      this.showFriendDetailFlag = true
      this.friendDetail = item;
      console.log("friendDetail: "+JSON.stringify(item))

      // 其他操作 ，如修改备注等等
    },

    /**
     * 获取用户的个人信息
     *
     */
    getUserInfo(){
      post('/getUserInfo',{
      }).then(e=>{
        this.tags[0].name = e['data']['data']['age']
        this.tags[1].name = e['data']['data']['userName']
        this.tags[2].name = e['data']['data']['email']

        this.userInfo.signature = e['data']['data']['signature']
        if(e['data']!=null){
          this.userEditInfo = e['data']['data']
        }

        console.log('------ info -------')
        console.log(e)
      })

    },


    /**
     * 编辑方法
     */
    editorAndSave(){


        post('/editUser',this.userEditInfo).then(e=>{
         if(e['code'] ===200){
           this.$message.success({
             message: '保存成功',
             type: 'success'
           })
         }else{
           this.$message.error({
             message: '保存失败',
             type: 'warning'
           })
         }
          this.dialogVisible = false
          this.getUserInfo()
        })
    },


    /**
     * 打开编辑弹框
     */
    openEdit(){
      this.dialogVisible = true;
    },

    /**
     *
     * @param file
     * @returns {boolean}
     */

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    /**
     *
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      console.log(tab, event);
    },

    /**
     * 保存用户头像 的图片路径
     */

    saveImgPath(){
      let url = this.imageUrl
      post('/insertAvatar',{
        other:'dssd',
        filePath: url
      }).then(e=>{
        console.log(e)
      })
    },

    /**
     * 获取用户信息
     */
    updateUserInfo(){
      post('/getUserInfo',{

      }).then(e=>{
        console.log(e)
        this.tags
      })
    },





  },
}
</script>

<style scoped>

.u-fri-List{
  border-radius: 6px;
  width: 80%;
  cursor: pointer;
  height: 80px;
  margin-left: 25px;
  margin-right: 15px;
  margin-top: 15px;

  background-color: #e5eae5;
  border: 1px solid #66a16e;

}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  border: #2e3237 solid 1px;
  width: 78px;
  height: 78px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  border: #8c939d solid 1px;
  width: 78px;
  height: 78px;
  display: block;
}


.back{
 /* position: absolute;
  top: 50px;*/

  font-family: "Britannic Bold", serif;
  border-radius: 5px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
}
.el-avatar {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: #fff;
  /* background: #C0C4CC; */
  background: inherit;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.back-0{
  color:black ;
  width: 500px;
  height: 60px;
}

.user-info-article{
  width: 280px;
  margin-top: 10px;
  height: 50px;
  border-bottom: 1px solid #dfe6de;
  background-color: white;
}
.create-user{
  width: 280px;
  height: 200px;
  background-color: white;
}

.user-info{
  width: 80px;
  height: 80px;
}
.user-img{
  height: 60px;
  position: absolute;
  top: -10px;

}
.el-divider__text {
  position: absolute;
  background-color: transparent;
  padding: 0 20px;
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}
.el-divider2{
  background-color: #c7d4e4;
}

@keyframes ani-demo-spin {

}

.show-time{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.show-time2{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.user-body{
  width: 41%;
  height: 550px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.user-banner {
  background-image: linear-gradient(45deg, #dee1de, #d8efd8);
  border: #95bdab solid 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
  width:  40%;
  margin: 10px;
  height: 180px;
  backdrop-filter: blur(3px);
  color: #9ba7b9;
}

.user-left {
  background-image: linear-gradient(45deg, #c6d3c6, #f9fbf9);
  border: #c4cfc9 solid 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
  width:100%;
  height: 520px;
  backdrop-filter: blur(5px);

  color: #b5bfba;
  margin: 5px;
}
.el-tabs__item:hover {
  color: #e6eef6;
  cursor: pointer;
}


 .el-tabs__item.is-active {
   color: #e4eaf1;
 }

.el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  /* background-color: #E4E7ED; */
  background-color: #42b983;

  z-index: 1;
}
.user-right {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 5px;
  width: 30%;
  margin: 5px;
  height: 500px;
  background-color: #edf3f0;
  color: #9ba7b9;
}


</style>
